<template>
    
    <div>
      <van-sticky>
        <van-nav-bar title="家具商城" />
    </van-sticky>
    <van-swipe :autoplay="3000" indicator-color="white">

    <van-swipe-item v-for="item in HotList" :key="item.id">
      <router-link :to="{path:'/product/info',query:{proid:item.id}}">
        <van-image 
          width="100%" 
          height="240px" 
          fit="cover" 
          :src="item.thumbs_cdn" />
      </router-link>
     
    </van-swipe-item>
  </van-swipe>

  <van-grid :border="false" :column-num="4">
    <van-grid-item to="/product" text="全部商品">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/quanbu.png" />
     </template>
    </van-grid-item>
    <van-grid-item text="商品直播">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/zhibo.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/coupon" text="优惠活动">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/youhui.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/product/rank" text="榜单排行">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/bangdan.png" />
     </template>
    </van-grid-item>
  </van-grid>

  <div class="type">新品推荐</div>

  <div class="list">
    <router-link :to="{path:'/product/info',query:{proid:item.id}}" 
    class="item" 
    v-for="item in NewList" 
    :key="item.id">

      <div class="back">
        <van-image
                    width="100%"
                    height="120px"
                    fit="cover"
                    :src="item.thumbs_cdn"
                />
      </div>
   
      <p class="price">￥{{ item.price }}</p>
    </router-link>
  </div>
</div>
  <Tabbar />
</template>

<script setup>

const { proxy } = getCurrentInstance()

const HotList = ref([]);
const NewList = ref([]);

onBeforeMount(() => {
    getProductData();
});

const getProductData = async () =>
{
    let result = await proxy.$http.post({
        url:'/index/product'
    })

    if(result.code === 1)
    {
        HotList.value = result.data.HotList;
        NewList.value = result.data.NewList;
    }
}

</script>

<style scoped>
    @import url('/assets/css/home.css');
</style>